<template>
    <el-table :data="data.slice(0, 5)" size="small" class="el-table" :height="420">
        <el-table-column prop="name" label="团队">
            <template #default="scope">
                <span class="span">
                    {{ usergroup[scope.$index] }}
                </span>
            </template>
        </el-table-column>
        <el-table-column class-name="color2 text-center fw-bold" prop="questioncount" label="练习量" width="80">
            <template #default="scope">
                <MynumberVue :num="Number(scope.row.questioncount)"></MynumberVue>
            </template>
        </el-table-column>

        <el-table-column class-name="color1 text-center fw-bold" prop="videocount" label="视频学习量" width="120">
            <template #default="scope">
                <MynumberVue :num="Number(scope.row.videocount)"></MynumberVue>
            </template>
        </el-table-column>
        <el-table-column prop="usercount" class-name=" text-center fw-bold" label="总人数" width="80">
            <template #default="scope">
                <MynumberVue :num="Number(scope.row.usercount)"></MynumberVue>
            </template>
        </el-table-column>
        <el-table-column prop="teachercount" class-name=" text-center fw-bold" label="教师人数" width="100">
            <template #default="scope">
                <MynumberVue :num="Number(scope.row.teachercount)"></MynumberVue>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import MynumberVue from "../../../components/animejs/mynumber.vue"
import { onMounted } from 'vue';
import { sample } from 'underscore'

defineProps<{ data: Studycodemodel.Iteam[], centerref: any }>()
const usergroup = ['北京钱学森中学初2024级',

    '北京钱学森中学小学组（本校区）',

    '北京钱学森中学高2024级',

    '北京钱学森中学初2023级',

    '北京钱学森中学初2022级']

</script>

<style scoped>
.el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0.0);
    --el-table-text-color: #fff;
    --el-table-header-text-color: #fff;
    --el-table-header-bg-color: var(--el-table-bg-color);
    --el-table-tr-bg-color: var(--el-table-bg-color);
    --el-table-row-hover-bg-color: var(--el-table-bg-color);
    --el-table-border: none;
    --el-table-border-color: var(--el-table-bg-color);
}

.span {
    cursor: pointer;

}

.span:hover {
    font-weight: 700;
}
</style>

<style>
.sciencecenter .el-table .cell {
    /* height: 21px; */
    word-break: keep-all;
    /* line-height: 21px; */
}

.sciencecenter .el-table__header-wrapper {
    font-size: 16px !important;
    font-family: 'FZZongYi-M05S';
    height: 30px;
    border-bottom: 1px solid #FFFFFF;
    padding: 0px 0px 12px;

}

.sciencecenter .el-table__header-wrapper .cell {
    height: 16px;
    line-height: 16px !important;
    font-weight: 400;
    margin-top: -6px;
}

.sciencecenter .el-table--small .el-table__cell {
    padding: 6px 0 !important;
}

.sciencecenter .el-table--small .cell {
    padding: 0 !important;
}

.sciencecenter .color0 a {

    --el-table-text-color: #00C2FF;
    color: #00C2FF;
    text-decoration: none;
}

.sciencecenter .color0 a:hover {
    font-weight: 700;
}

.sciencecenter .color0 .el-table__header-wrapper .color0 a {
    --el-table-text-color: transparent;
    color: transparent;
}

.sciencecenter .el-table__header-wrapper .color0 .cell a {
    background: linear-gradient(315deg, #0670F8 0%, #34C7FC 100%);
    background-clip: text;
    -webkit-background-clip: text;
}



.sciencecenter .color1 {
    --el-table-text-color: transparent;
    color: transparent;
    font-weight: 700;
}

.sciencecenter .color1 .cell {
    background: linear-gradient(180deg, #50FE83 0%, #1CDD5E 100%);
    background-clip: text;
    -webkit-background-clip: text;

}

.sciencecenter .cell span {
    font-family: Bebas;
}



.sciencecenter .color2 {
    --el-table-text-color: transparent;
    color: transparent;
}

.sciencecenter .color2 .cell {
    background: linear-gradient(180deg, #FCF100 0%, #F5A300 100%);
    background-clip: text;
    -webkit-background-clip: text;

}

.sciencecenter .el-progress__text {
    --el-text-color-regular: #fff;
    font-size: 12px !important;
}
</style>